<template>
	<div class="system-role-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<template #header>
				<div class="card-header">
					<span style="font-weight: bold; font-size: 1.2em;">订单详情</span>
				</div>
			</template>
			<el-row :gutter="35">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">订单编号:</span>
						<span class="value">{{ state.ruleForm.orderNumber }}</span>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">用户电话:</span>
						<span class="value">{{ state.ruleForm.userPhon }}</span>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">商品名称:</span>
						<span class="value">{{ state.ruleForm.goodsName }}</span>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">订单状态:</span>
						<el-tag type="warning" v-if="state.ruleForm.statue === 1">已支付</el-tag>
						<el-tag type="success" v-else-if="state.ruleForm.statue === 2">已完成</el-tag>
						<el-tag type="info" v-else>待支付</el-tag>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">下单时间:</span>
						<span class="value">{{ state.ruleForm.orderTime }}</span>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">商品原价:</span>
						<span class="value">{{ state.ruleForm.originallyPrice }} ¥</span>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">优惠:</span>
						<span class="value">{{ state.ruleForm.preferentialPrice }} ¥</span>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">实际价格:</span>
						<span class="value" style="color: red;">{{ state.ruleForm.price }} ¥</span>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<div class="card-item">
						<span class="label">订单适用时间:</span>
						<span class="value" v-html="formattedApplicableTime"></span>
					</div>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import { number } from 'echarts';
import { reactive, computed } from 'vue';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
	ruleForm: {
		orderId: number,
		orderNumber: '',
		price: '',
		statue: null,
		payway: '',
		goodsName: '',
		originallyPrice: '',
		preferentialPrice: '',
		userPhon: '',
		orderTime: '',
		applicableTime: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});




const formatApplicableTime = (timeString: any) => {
	if (!timeString) return '';
	const timeArray = timeString.split(','); // 假设分隔符是逗号
	return timeArray.join('<br>'); // 用逗号和换行符连接
};

const formattedApplicableTime = computed(() => {
	return formatApplicableTime(state.ruleForm.applicableTime);
});




// 打开弹窗
const openDialog = (row: any) => {
	state.ruleForm = row;
	state.dialog.isShowDialog = true;
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
	.box-card {
		margin-bottom: 20px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-item {
		display: flex;
		margin-bottom: 10px;

		.label {
			font-weight: bold;
			min-width: 80px;
			margin-right: 10px;
		}

		.value {
			flex: 1;
		}
	}

	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>